<template>
  <div class="inbox-notifications-details">
    <div class="details-part">
      <div class="part-one-top">
        <p class="top-title">
          <span>{{ currentDetail.typeName }}</span>
          <span>&nbsp;|&nbsp;</span>
          <span>{{ currentDetail.title }}</span>
        </p>
        <p class="top-date">
          <span class="time">{{ getTime(currentDetail.createTime) }}</span>
          <span class="type">留言类型: {{ currentDetail.typeName }}</span>
        </p>
      </div>
      <img src="../../assets/images/dashedLine.png" alt="">
      <div class="part-one-content reply-detail"  v-html="currentDetail.remark">
        <!-- 随便输入点什么内容，看下样式是怎么样的~ -->
        <!-- <span class="row-box title">恭喜您，您投递的XXX获得面试邀约: </span>
        <div class="row-box">
            <span class="title">面试时间: </span>
            <span>2022-02-02</span>
        </div>
        <div class="row-box">
            <span class="title">面试方式: </span>
            <span>线下面试</span>
        </div>
        <div class="row-box">
            <span class="title">面试城市: </span>
            <span>深圳市</span>
        </div>
        <div class="row-box">
            <span class="title">详细地址: </span>
            <span>南山区110号</span>
        </div>
        <div class="row-box">
            <span class="title">其他: </span>
            <span>无</span>
        </div> -->
      </div>
      <div class="part-one-person">
        <p class="person-item" v-if="currentDetail.type !== 1">
          <span class="title">联系人名称</span>
          <span class="value">{{ currentDetail.studentName }}</span>
        </p>
        <p class="person-item" v-if="currentDetail.type !== 1">
          <span class="title">联系人电话</span>
          <span class="value">{{ currentDetail.phone }}</span>
        </p>
        <p class="person-item" v-if="currentDetail.fileName">
          <span class="title">附件:&nbsp;{{ currentDetail.fileName }}</span>
          <span class="down-btn">请到PC端浏览该文件</span>
        </p>
      </div>
      <div
        class="ask-answer-box"
        v-for="(item, i) in currentDetail.messageInfoRespDTOList"
        :key="i"
      >
        <div class="time">
          <span class="replay-time">回复时间: {{ getTime(item.createTime) }}</span>
          <span>{{ item.replyType === "1" ? item.reply : "平台运营" }}</span>
          <!-- <span></span> -->
        </div>
        <p class="content">{{ item.remark }}</p>
      </div>
      <div class="reply-box" v-if="isShowReplyBox">
        <span class="title">回复</span>
        <textarea
          type="textarea"
          v-model="remark"
          maxlength="2000"
          placeholder="请输入回复内容"
        ></textarea>
        <span class="remark-length">{{ remark.length }}/2000</span>
      </div>
      <div class="submit-btn" v-if="isShowReplyBox">
        <span class="btn" @click="handleReply">提交</span>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { formatDate } from "@/utils/utils";
import { innerMsgReply, getInnerMsgDetail } from "@/request/api";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      currentDetail: {},
      remark: ''
    }
  },
  created() {
    this.getInnerMsgDetail();
  },
  methods: {
    getTime(value) {
      return formatDate(new Date(value));
    },
    async handleReply() {
      if (!this.remark) {
        Toast("请输入回复内容");
        return
      }
      const { code, data, msg } = await innerMsgReply({
        fileUrl: this.currentDetail.fileUrl,
        messageId: this.currentDetail.id,
        phone: this.currentDetail.phone,
        remark: this.remark,
        reply: this.currentDetail.reply,
        studentName: this.currentDetail.studentName,
      });
      if (code !== 0) {
        Toast.error(msg);
        return;
      }
      Toast.success("提交成功");
      this.getInnerMsgDetail();
    },
    async getInnerMsgDetail() {
      const id = this.$route.query.id;
      const { code, data } = await getInnerMsgDetail({ id });
      if (code !== 0 || !data) {
        this.currentDetail = {};
        return;
      }
      this.currentDetail = data;
    }
  },
  computed: {
    isShowReplyBox() {
      // <!-- 消息状态 0 学生发起运营未读 1运营已读 2运营回复 学生未读 3学生已读 4学生回复运营未读 5系统消息未读 6 系统消息已读 -->
      return (
        (this.currentDetail.status === "2" || this.currentDetail.status === "3") &&
        this.currentDetail.type !== 1
      );
    },
  }
}
</script>
<style lang="less" scoped>
@media (max-width: 768px) {
  .details-part {
    padding: 0 0.1rem;
  }
  .part-one-top {
    padding: 0.20rem 0 0.15rem;
    .top-title {
      span {
        display: inline-block;
        height: 0.21rem;
        font-size: 0.15rem;
        font-weight: 500;
        color: #37383D;
        line-height: 0.21rem;
      }
    }
    .top-date {
      display: flex;
      margin-top: 0.1rem;
      span {
        display: inline-block;
        height: 0.17rem;
        font-size: 0.12rem;
        color: #9597A0;
        line-height: 0.17rem;
      }
      .time {
        flex: 1;
      }
    }
  }
  .part-one-content {
    padding-top: 0.14rem;
  }
  .part-one-person {
    padding-top: 0.4rem;
    .person-item {
      display: flex;
      height: 0.17rem;
      align-items: center;
      margin-bottom: 0.12rem;
      span {
        flex: 1;
        font-size: 0.12rem;
        color: #9597A0;
        line-height: 0.17rem;
      }
      .value {
        color: #37383D;
      }
    }
  }
  .ask-answer-box {
    margin-top: 0.08rem;
    width: 3.55rem;
    height: 0.77rem;
    background: #F9F9F9;
    border-radius: 0.04rem;
    border: 1px solid #F0F0F0;
    padding: 0.15rem 0.1rem;
    .time {
      display: flex;
      height: 0.17rem;
      font-size: 0.12rem;
      color: #9597A0;
      line-height: 0.17rem;
      .replay-time {
        flex: 1;
      }
    }
    .content {
      height: 0.18rem;
      font-size: 0.13rem;
      color: #37383D;
      line-height: 0.18rem;
      margin-top: 0.12rem;
    }
  }
  .reply-box {
    position: relative;
    .title {
      display: block;
      font-size: 0.14rem;
      font-weight: 500;
      color: #37383D;
      line-height: 0.2rem;
      padding: 0.31rem 0 0.1rem;
    }
    textarea {
      width: 3.55rem;
      height: 2.4rem;
      border-radius: 0.02rem;
      border: 1px solid #F0F0F0;
      padding: 0.05rem;
      font-size: 0.14rem;
      color: #37383D;
    }
    .remark-length {
      position: absolute;
      font-size: 0.14rem;
      color: #B0B0B0;
      line-height: 0.2rem;
      right: 0.15rem;
      bottom: 0.1rem;
    }
  }
  .submit-btn {
    padding: 0.53rem 0.05rem;
    span {
      display: inline-block;
      width: 3.45rem;
      height: 0.55rem;
      background: #3D6CB0;
      border-radius: 0.05rem;
      color: #ffffff;
      text-align: center;
      line-height: 0.55rem;
    }
  }
}
</style>